<!--
 * @Description: 第九章 认识computed计算属性
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-12 01:27:20
-->
<template>
  <div>
    <p>computed</p>
    <div>
      <p>1. 选项式写法 支持一个对象传入get函数以及set函数自定义操作</p>
      <div>
        <label> 姓： <input type="text" v-model="formLastName_1" /> </label>
        <label> 名： <input type="text" v-model="formFirstName_1" /></label>
      </div>
      <div>全名： {{ formName_1 }}</div>
      <div>
        <button @click="changeformName_1">修改formName_1</button>
      </div>
    </div>
    <hr />
    <div>
      <p>2. 函数式写法，只能支持一个getter函数不允许修改值</p>
      <div>
        <label> 姓： <input type="text" v-model="formLastName_2" /> </label>
        <label> 名： <input type="text" v-model="formFirstName_2" /></label>
      </div>
      <div>全名： {{ formName_2 }}</div>
      <div>
        <button @click="changeformName_2">修改formName_2</button>
      </div>
    </div>
    <hr />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue'

const formFirstName_1 = ref('三')
const formLastName_1 = ref('张')

// 1. 选项式写法 支持一个对象传入get函数以及set函数自定义操作
const formName_1 = computed<string>({
  get() {
    return formLastName_1.value + ' _ ' + formFirstName_1.value
  },
  set(newVal) {
    ;[formFirstName_1.value, formLastName_1.value] = newVal.split('-')
  },
})

const changeformName_1 = () => {
  formName_1.value = 'IA-Ker'
  console.log('changeformName_1 Function 修改formName_1值时触发computed的set')
}

// 2. 函数式写法，只能支持一个getter函数不允许修改值
const formFirstName_2 = ref('四')
const formLastName_2 = ref('李')

// 1. 选项式写法 支持一个对象传入get函数以及set函数自定义操作
const formName_2 = computed(() => {
  return formLastName_2.value + ' _ ' + formFirstName_2.value
})

const changeformName_2 = () => {
  //ormName_2.value = 'IA-Ke'
  console.log('changeformName_2 函数式写法 不允许修改formName_2值')
}
</script>
<style scoped>
hr {
  margin: 10px 0;
}
</style>
